<template>
  <el-row :gutter="20">
    <el-col :span="14">
      <el-card class="box-card">
        <div class="clearfix box-header">
          <span>基本信息</span>
        </div>
        <div class="question-table">
          <table border="1">
            <tr>
              <td>手机号</td>
              <td>{{this.info.mobile}}</td>
              <td>注册时间</td>
              <td v-if="this.info.register_time !== null && this.info.register_time !== undefined">{{this.info.register_time | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}</td>
              <td v-else>无</td>
            </tr>
            <tr>
              <td>性别</td>
              <td>{{this.info.sex}}</td>
              <td>出生日期</td>
              <td>{{this.info.age | parseTime('{y}-{m}-{d}')}}</td>
            </tr>
            <tr>
              <td>常住地</td>
              <td>{{this.info.address}}</td>
              <td>社保</td>
              <td>{{this.info.social}}</td>
            </tr>
            <tr>
              <td>职业</td>
              <td colspan="3">{{this.info.profession}}</td>
            </tr>
          </table>
        </div>
      </el-card>
    </el-col>
    <el-col :span="10">
      <el-card class="box-card">
        <div class="clearfix box-header">
          <span>问卷结果：<font>{{this.info.status}}</font></span>
        </div>
        <div class="question-table">
          <table border="1">
            <tr>
              <td>基础信息 开始时间</td>
              <td v-if="this.info.create_time !== null && this.info.create_time !== undefined">{{this.info.create_time | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}</td>
              <td v-else>无</td>
            </tr>
            <tr>
              <td>健康问卷 开始时间</td>
              <td v-if="this.info.common_time !== null && this.info.common_time !== undefined">{{this.info.common_time | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}</td>
              <td v-else>无</td>
            </tr>
            <tr>
              <td>健康问卷 结束时间</td>
              <td v-if="this.info.finish_time !== null && this.info.finish_time !== undefined">{{this.info.finish_time | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}</td>
              <td v-else>无</td>
            </tr>
            <tr>
              <td>相关订单</td>
              <td v-if="info.oid !== '' && info.oid !== undefined">
                <template v-if="info.oid !== '' && info.oid !== undefined && info.oid !== null">
                  {{this.info.statusOrder}}<router-link :to="'/order/view/'+info.oid">查看</router-link>
                </template>
                <template v-else>无</template>
              </td>
            </tr>
          </table>
        </div>
      </el-card>
    </el-col>
    <el-col :span="24">
      <el-card class="box-card">
        <div class="clearfix box-header">
          <span>{{info.type}}</span>
        </div>
        <div class="question-list">
          <div class="question-item" v-for="(item,index) in info.text" v-bind:key="index">
            <div class="title">
              <i>{{index + 1}}</i>
              <span>{{item.title}}</span>
            </div>
            <div class="content">{{item.answer}}</div>
            <div class="question-item-child" v-for="(it,ind) in item.children" v-bind:key="ind">
              <div class="child-title">
                <i></i>
                <span>{{it.title}}</span>
              </div>
              <div class="child-content">{{it.answer}}</div>
            </div>
          </div>
        </div>
      </el-card>
    </el-col>
    <el-col :span="24">
      <el-card class="box-card">
        <div class="clearfix box-header">
          <span>填写记录</span>
        </div>
        <div>
          <el-table
            :data="info.otherRecords"
            style="width: 100%">
            <el-table-column
              label="ID"
              width="180"
              align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.ID }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="基础信息 开始时间"
              width="220"
              align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.create_time | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="性别"
              width="180"
              align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.sex }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="出生日期"
              width="180"
              align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.age | parseTime('{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="回答结果"
              width="180"
              align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.status }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="相关订单编号"
              min-width="220"
              align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.statusOrder !== '' && scope.row.statusOrder !== undefined && scope.row.statusOrder !== '无'">{{ scope.row.ordnum }}</span>
                <span v-else>—</span>
              </template>
            </el-table-column>
            <el-table-column
              label="相关订单状态"
              width="180"
              align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.statusOrder !== '' && scope.row.statusOrder !== undefined && scope.row.statusOrder !== '无'">{{ scope.row.statusOrder }}</span>
                <span v-else>—</span>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              width="180"
              align="center">
              <template slot-scope="scope">
                <router-link :to="'/order/healthQuestion/'+scope.row.ID">查看</router-link>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<style scoped>
  .question-item {
    margin: 20px 0;
  }
  .cell a {
    color: #3fb2fe;
  }
  .cell a:hover {
    text-decoration: underline;
  }
  .title {
    margin: 5px 0;
    color: #4d4d4d;
  }
  .title i {
    width: 22px;
    height: 22px;
    line-height: 22px;
    font-style: normal;
    display: inline-block;
    text-align: center;
    background-color: #109ef0;
    color: #fff;
    font-size: 16px;
    border-radius: 50%;
    margin-right: 10px;
  }
  .content {
    font-size: 14px;
    padding: 10px 0px 10px 36px;
    color: #4d4d4d;
  }
  .question-item-child {
    padding-left: 35px;
    margin: 20px 0;
  }
  .child-title {
    margin: 5px 0;
    color: #4d4d4d;
    line-height: 24px;
  }
  .child-title i {
    width: 8px;
    height: 8px;
    line-height: 22px;
    font-style: normal;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    background-color: #109ef0;
    color: #fff;
    font-size: 16px;
    border-radius: 50%;
    margin-right: 5px;
  }
  .child-content {
    font-size: 14px;
    padding: 10px 0px 10px 20px;
    color: #4d4d4d;
  }
  .question-table table {
    width: 100%;
    line-height: 50px;
    border-collapse: collapse;
  } 
  .question-table table, .question-table td {
    border: solid 1px #dbdbdb;
  }
  .question-table td {
    font-size: 14px;
  }
  .question-table td:nth-child(odd) {
    width: 15%;
    text-align: center;
    color: #999999;
  }
  .question-table td:nth-child(even) {
    width: 35%;
    padding-left: 20px;
    color: #4d4d4d;
  }
  .question-table td a {
    font-size: 14px;
    color: #45b9fe;
    float: right;
    margin-right: 20px;
  }
  .question-table td a:hover {
    text-decoration: underline;
  }
  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }
  .el-carousel__item {
    background-color: #d3dce6;
  }
	.el-form-item__content a {
		color: #45b9fe;
		float: right;
	}
  .el-form-item__content a:hover {
    text-decoration: underline;
  }
  .el-card .el-form-item {
    margin-bottom: 0px;
  }
  .el-col .el-card__header {
  	border-bottom:0 !important;
  }
  .box-card {
    margin-top: 20px;
  }
  .box-header svg {
    font-size: 20px;
    margin-right: 10px;
  }
  .box-header {
    padding: 10px 0;
    font-weight: bold;
    color: #858585;
  }
  .box-header font {
    color: #45b9fe;
  }
</style>
<script>
import { mapGetters } from 'vuex'
import { healthQuestionInfo } from '@/api/order'
export default {
  props: {
    path: String
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  data() {
    return {
      id: this.$route.params.id,
      info: [],
      tableData: []
    }
  },
  mounted() {
    this.getInfo()
  },
  watch: {
    '$route'(to, from) {
      // 对路由变化作出响应...
      this.id = this.$route.params.id
      this.getInfo()
    }
  },
  methods: {
    resetTemp() {
      this.temp = {
        r_content: ''
      }
    },
    getInfo() { // 获取健康问卷信息
      healthQuestionInfo({ qid: this.id }).then(response => {
        this.info = response.data
      })
    }
  }
}
</script>
